<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .nav{
        list-style: none;
        margin-left: 700px;
        margin-top: 40px;
    }
    li{
        float: left;
        margin-left: 20px;
    }
    a{
        color:#333;
        font-size: 13px;
    }
    a:hover{
        color:blue;
    }
    .row::after{
        content: "";
        display: table;
        clear: both;
    }
    .set{
        position: relative;
    }
    #set-content{
        position: absolute;
        /* display: none;  */
        width:60px;
        border:1px solid #ddd;
        text-align: center;
        right:-23px;
        top:26px;
    }
    #set-content a{
        display: block;
        line-height: 30px;
    }
    #set-content a:hover{
        color:#fff !important;
        background:blue;
    }
    #set-content::before,#set-content::after{
        content: "";
        display: block;
        border:8px solid transparent;
        top:-16px;
        left:32%;
        position: absolute;
    }
    #set-content::after{
        border-bottom-color: #d8d8d8;
        top:-17px;
    }
    #set-content::before{
        z-index: 100;
        border-bottom-color: #fff;
    }
    .child::after{
         content: "";
         display: block;
         position: absolute;
         border:6px solid transparent;
         border-top-color: #666;
         top:9px;
         left: 30px;
    }
    button{
        margin-left: 30px;
        background:paleturquoise;
        border:none;
        color:#fff;
        font-size: 14px;
        width:80px;
        height:30px;
    }
    .none{
        display: none;
    }
    </style>
</head>
<body>
    <ul class="nav row">
      <li><a href="#">新闻</a></li>
      <li><a href="#">hao123</a></li>
      <li><a href="#">地图</a></li>
      <li><a href="#">视频</a></li>
      <li><a href="#">贴吧</a></li>
      <li><a href="#">学术</a></li>
      <li><a href="#">登陆</a></li>
      <li class="set"id="toggle">
          <a href="#" class="child">设置</a>
             <div class="none" id="set-content">
                 <a href="#">搜索设置</a>
                 <a href="#">高级设置</a>
                 <a href="#">关闭预测</a>
                 <a href="#">隐私设置</a>
             </div>
        </li>
        <button>更多产品</button>
    </ul>
    <script>
        var toggle = document.getElementById("toggle");
            var set = document.getElementById("set-content");
            toggle.onclick = () => {
                set.classList.toggle("none")
            }
    </script>
</body>
</html>